<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<%
	request.setAttribute("modelConfigPath", "superbase");
%>

<%@ include file="/WEB-INF/views/shared/master/contentHeader.jsp"%>

<style type="text/css">
	body{
		background-color: #fff;
	}
	
	.selectTab,.updateTab{
		margin-bottom: 0px;
	}
	.updateTab{
		margin-top: 10px;
	}
	.loadTab{
		margin-left: 10px;
		margin-bottom: 0px;
	}
	.selectTab .panel-heading,.loadTab .panel-heading,.updateTab .panel-heading{
		padding: 1px 10px;
	}
	.row{
		margin-left: 0px;
		margin-right: 0px;
	}
	.heading-elements{
		margin-top: -15px;
	}
	.heading-elements ul.icons-list{
		margin-top: 7px !important;
	} 
</style>

<div class="row" style="margin: 10px 20px;">
	<div class="col-sm-2">
		<span class="form-control-static">名称</span>
		<span class="form-control-static">
			<label class="label label-primary">${menu.name }</label>
			<input type="hidden" class="parentId" value="${menu.id}" />
		</span>
	</div>
	<div class="col-sm-6">
		<span class="form-control-static">连接地址</span>
		<span class="form-control-static">
			<label class="label label-primary" style="text-transform:capitalize;">${menu.navigateUrl }</label>
		</span>
	</div>
	<div class="col-sm-3">
	</div>
</div>
<div class="row">
	<div style="height:550px;padding-right: 0px;padding-left: 0px;" class="col-sm-3">
		<t:panel cssClass="panel-flat border-top-xlg border-top-primary loadTab" customBody="true" customHead="true">
			<t:panelHead title="被选按钮<span class='text-success small'>(双击添加)</span>"></t:panelHead>
			<div class="panel-body" style="padding: 0px;padding-bottom: 10px;height:510px;overflow-y:auto; ">
				<c:forEach items="${buttons}" var="button">
					<div class="col-sm-5 loadTab-button" style="margin-left: 3px;margin-top: 10px;">
						<t:button cssClass="${button.theme}" csize="xs" data-name="${button.name}" data-id="${button.id}" icon="${button.icon }"><span>${button.name}</span></t:button>
					</div>
				</c:forEach>
			</div>
		</t:panel>
	</div>
	<div style="" class="col-sm-9">
		<t:panel cssClass="panel-flat border-top-xlg border-top-primary selectTab" customBody="true" customHead="true">
			<t:panelHead title="已选按钮<span class='text-success small'>(单击修改)</span>"></t:panelHead>
			<div class="panel-body selectTabButtons" style="height:90px;overflow-y:auto; ">
				<c:import url="allotMenuSelectButton.jsp" />
			</div>
		</t:panel>
		<t:panel cssClass="panel-flat border-top-xlg border-top-primary updateTab" customBody="true" customHead="true">
			<t:panelHead title="新增">
				<ul class="icons-list">
               		<li><a title="刷新" href="javascript:reloadButtonDetailed('')"><i class="icon-reload-alt"></i></a></li>
               	</ul>
			</t:panelHead>
			<div class="panel-body buttonDetailed" style="height:332px;overflow-y:auto; ">
				<c:import url="allotMenuButtonDetailed.jsp" />
			</div>
			<div class="navbar navbar-default navbar-sm text-right">
				<div style="float:left;width:100%;">
					<div class="btn-group inline-block" style="padding-top: 4px;padding-left: 10px;">
						<t:button icon="icon-minus3" onclick="deleteData()" cssClass="btn-danger hide btn-delete" csize="sm">删除</t:button>
						<t:button icon="icon-floppy-disk" onclick="saveData()" cssClass="btn-info" csize="sm">保存</t:button>
					</div>
				</div>
			</div>
		</t:panel>
	</div>
</div>


<script type="text/javascript">
	$(function(){
		bindSelectButtonBind();
		
		$(".loadTab-button button").on("dblclick",function(){
			
			if($(".loadSelTab-button button[data-name='"+$(this).data("name")+"']").length>0){
				$.topNotify("【"+$(this).data("name")+"】按钮已经存在");
				return;
			}
			
			
			var buttonId=$(this).data("id");
			var parentId=$(".parentId").val();
			
			var url=$.getVirtualPath()+"/admin/superbase/menu/saveButtonToMenu?buttonId="+buttonId+"&parentId="+parentId;
			var result=$.getJson(url);
			if(result.resultType=="success"){
				reloadSelectButton();
			}
		});
	});
	
	function reloadSelectButton(){
		var parentId=$(".parentId").val();
		var url=$.getVirtualPath()+"/admin/superbase/menu/allotMenuSelectButton?parentId="+parentId;
		var html=$.getText(url);
		$(".selectTabButtons").html(html);
		
		bindSelectButtonBind();
	}
	
	function bindSelectButtonBind(){
		$(".selectTabButtons button").on("click",function(){
			var buttonId=$(this).data("id");
			
			reloadButtonDetailed(buttonId);			
		});
	}
	
	function reloadButtonDetailed(menuId){
		var url=$.getVirtualPath()+"/admin/superbase/menu/allotMenuButtonDetailed?&menuId="+menuId;
		var html=$.getText(url);
		
		$(".buttonDetailed").html(html);
		$("#parentId").val($(".parentId").val());
		if($.isNull(menuId)){
			$(".updateTab .panel-title").text("新增");
			$(".btn-delete").addClass("hide");
		}else{
			$(".updateTab .panel-title").text("修改");
			$(".btn-delete").removeClass("hide");
		}
	}
	
	function saveData(){
		if(!$("form:first").valid()){
			return;
		}
		
		if($(".loadSelTab-button button[data-name='"+$("#name").val()+"']:not([data-id='"+$("#menuId").val()+"'])").length>0){
			$.topNotify("【"+$("#name").val()+"】按钮已经存在");
			return;
		}
		
		$("form:first").submit();
	}
	
	function deleteData(){
		var menuId=$("#menuId").val();
		var url=$.getVirtualPath()+"/admin/superbase/menu/delete?key="+menuId;
		var result=$.getJsonPost(url);
		if(result.resultType=="success"){
			reloadSelectButton();
			reloadButtonDetailed("");
		}else{
			$.topNotify("删除失败，检查是否有主外键关联");
		}
	}
	
	function onSuccess(result){
		result=$.parseJSON(result);
		if(result.resultType=="success"){
			reloadSelectButton();
			reloadButtonDetailed("");
		}else{
			$.topNotify("添加失败");
		}
	}
</script>



<%@ include file="/WEB-INF/views/shared//master/contentFooter.jsp"%>